<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NButton,
  NCheckbox,
  NInput,
  NTag,
  useMessage,
  NFlex,
  NAvatar, NSelect, NInputNumber
} from 'naive-ui'

import api from '@/api'
const $table = ref(null)
const queryItems = ref({})
const vPermission = resolveDirective('permission')
const base_path = import.meta.env.VITE_BASE
const message = useMessage()
import default_image from "@/assets/images/mz.jpg"
import Info from '@/views/customer/user/info.vue'

const data = reactive({
  value: 0,
  customers:[],
  search_customer:'',
  goods:[],
  search_goods:'',
  select_customer:{
    id:0,
    name:"暂未选择",
    phone:"x",
    money_deposit:0
  },
  select_skus:[],
  select_price:0,
  select_goods:[],
  select_goods_nums:[],
  yue:0,
  coupons:[],
  select_coupons:[],
  select_space:1,
  desc:"",
  is_deposit:0,
  show_info:false,
});

function get_customers(){
  api.getSaasUserList({
    name:data.search_customer
  }).then((res) => (data.customers = res.data))
}


onMounted(() => {
  api.getSpaceList().then((res) => (data.option_space = res.data))
  get_customers()
})

function select_customer(item){
  data.select_customer = item
  message.success('已选择客户:'+item.name)
}
</script>

<template>
  <AppPage :show-footer="false" style="padding-top: 60px;">
    <n-grid :cols="3" :x-gap="12" :y-gap="8">
      <n-gi>
        <n-card  style="height: calc(100vh - 100px);"  content-style="padding: 0px;"   title="客户选择" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }" >
          <div style="margin:20px">
            <NInput v-model:value="data.search_customer" size="large" clearable type="text" placeholder="请输入姓名/手机号"
                    @keyup="get_customers()" />
          </div>
          <n-scrollbar style="max-height: calc(100vh - 250px);padding:0 20px 20px 20px">
            <n-card embedded  v-for="item in data.customers" class="customer_card" hover:card-shadow   size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }"
                    @click="select_customer(item)"
            >
              <template #header>
                <div style="display: flex; align-items: center;" @click="show_info(item)">
                  <NAvatar :src="item.avatar" :fallbackSrc="default_image" style="width: 30px; height: 30px; margin-right: 10px;border-radius: 50%" />
                  <span>{{ item.name }}</span>
                </div>
              </template>
              <template #header-extra>
                <NTag type="error" v-if="item===data.select_customer">已选择</NTag>&nbsp;
                <NTag >{{item.role_name}}</NTag>

              </template>
              <template #footer>
                <span color="#ef504e"></span>
                <n-flex justify="space-between" size="large">
                  <div>卡号: <span>{{item.card_no}}</span> </div>
                  <div>电话: <span>{{item.phone}}</span></div>
                </n-flex>
              </template>
            </n-card>
          </n-scrollbar>
        </n-card>
      </n-gi>

      <n-gi span="2">
        <n-card  style="height: calc(100vh - 100px);" content-style="padding: 0px;"    size="small" :segmented="{
          content: true,
          footer: 'soft',
        }">
          <n-scrollbar  style="max-height:calc(100vh - 120px);">
          <Info :info-data="data.select_customer" :key="select_customer?.id || Date.now()"/>
          </n-scrollbar>
        </n-card>
      </n-gi>

    </n-grid>
  </AppPage>

</template>

<style>
.customer_card{
  margin: 10px 0;
}
</style>
